<template>
  <div>
    <Card istitle>
      <template #title>商品分类</template>
      <!-- 添加分类按钮 -->
      <template #titleButtom>
        <el-button type="primary" size="mini" @click="dialogFormVisible = true"
          >添加分类</el-button
        >
      </template>
      <template>
        <!-- 表格 -->
        <el-table :data="goodData" style="width: 100%" size="mini">
          <el-table-column type="index" label="序号" width="180">
          </el-table-column>
          <el-table-column label="分类名称">
            <template v-slot="{ row }">
              <el-input
                v-if="row.flag"
                size="mini"
                v-model="row.cateName"
              ></el-input>
              <span v-else>{{ row.cateName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否启用">
            <template v-slot="{ row }">
              <el-switch
                v-model="row.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                :disabled="!row.flag"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                size="mini"
                @click="editCate(row)"
                :type="row.flag ? 'success' : 'primary'"
                >{{ row.flag ? '完成' : '编辑' }}</el-button
              >
              <el-button type="danger" size="mini" @click="deletCate(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>

        <!-- 分类添加表单 -->
        <el-dialog
          title="添加分类"
          :visible.sync="dialogFormVisible"
          width="40%"
          :before-close="handClose"
        >
          <!-- 表单 -->
          <el-form
            :model="cateform"
            label-width="80px"
            ref="catefrom"
            :rules="rules"
          >
            <el-form-item label="分类名称" prop="name">
              <el-input
                v-model="cateform.name"
                autocomplete="off"
                placeholder="分类名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
              <el-switch
                v-model="cateform.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
          </el-form>
          <!-- 按钮 -->
          <div slot="footer" class="dialog-footer">
            <el-button @click="handClose">取 消</el-button>
            <el-button type="primary" @click="addCate('catefrom')"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </template>
    </Card>
  </div>
</template>

<script>
import {
  getGoodsCateList,
  addGoodsCate,
  deleteGoodsCate,
  eitGoodsCate
} from '@/api/goods.js'
import { messagebox } from '@/utils/messagebox.js'
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      total: 0,
      goodData: [],
      dialogFormVisible: false,
      cateform: { name: '', state: true },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取分类列表
    async getGoodsList() {
      const { data, total } = await getGoodsCateList({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
      this.goodData = data
      this.goodData.forEach(item => this.$set(item, 'flag', false))
      this.total = total
    },
    // 一页显示多少条
    handleSizeChange(val) {
      this.pageSize = val
      this.getGoodsList()
    },
    // 显示第几页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getGoodsList()
    },
    // 添加分类
    async addCate(fromName) {
      const { code } = await addGoodsCate({
        cateName: this.cateform.name,
        state: this.cateform.state
      })
      if (code === 0) {
        this.$refs[fromName].resetFields()
        this.dialogFormVisible = false
        this.getGoodsList()
      }
    },
    // 提示关闭
    handClose() {
      this.$refs.catefrom.resetFields()
      this.dialogFormVisible = false
    },
    // 删除分类
    deletCate(id) {
      // 提示框
      messagebox.call(
        this,
        async () => {
          // 确定以后执行
          const { code } = await deleteGoodsCate({ id })
          if (code === 0) {
            this.getGoodsList()
          }
        },
        '此操作将永久删除该分类, 是否继续?'
      )
    },
    // 修改
    async editCate(row) {
      if (row.flag) {
        // 发请求
        if (row.cateName === '') return
        const { code } = await eitGoodsCate({
          id: row.id,
          cateName: row.cateName,
          state: !!row.state
        })
        if (code === 0) {
          row.flag = false
        }
      } else {
        // 编辑按钮
        row.flag = true
      }
    }
  },
  created() {
    this.getGoodsList()
  }
}
</script>

<style lang="less" scoped>
.el-table {
  margin: 20px 0 40px;
}
</style>
